<template>
    <a-drawer v-if="visible" :append-to-body="true" :width="540" :visible="visible" :closable="false"
      @cancel="closeDrawer()" @ok="save()" ok-text="保存">
      <template #title>
        <EditableText :value="flowNodeConfig.name" @change="onNodeNameChange" />
      </template>
    </a-drawer>
  </template>
  <script setup>
  import useApp from "@/hooks";
  const { $ } = useApp();
  import ArrayUtil from "../common/ArrayUtil";
  import Snowflake from "../common/Snowflake";
  import { NODE } from "../common/FlowConstant";
  import { IconDelete, IconSwap, IconPlus } from "@arco-design/web-vue/es/icon";
  import EditableText from "@/components/common/EditableText.vue";
  const visible = ref(false)
  $.on(NODE.EVENT+'-drawer-open', config => {
    flowNodeConfig.value = config;
    visible.value = true;
  })
  let flowNodeConfig = ref({});
  // 编辑节点名称
  const onNodeNameChange = (name) => {
    flowNodeConfig.value.name = name;
    save(false);
  };
  
  const save = (leave = true) => {
    leave && closeDrawer();
  };
  
  const closeDrawer = () => {
    visible.value = false;
  };
  
  </script>
  
  <style lang="less" scoped>
  
  </style>